@charset "UTF-8";
/*=======结构化代码=======*/

#navigation * {
    box-sizing: content-box;
}

#navigation {
    position: absolute;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 234px;
    height: 460px;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-list {
    padding: 20px 0;
    width: 234px;
    height: 420px;
}

.nav-item-first {
    width: 100%;
    height: 42px;
}

.nav-item-first a {
    position: relative;
}

.nav-item-first a .iconfont {
    position: absolute;
    right: 25px;
    top: 15px;
    width: 14px;
    height: 11px;
}

.nav-item-first:hover {
    background: #ff6700;
}

.nav-item-first:hover .show-wrap {
    display: block;
}

.first-link {
    /* 块和行内块 选择问题？？？ */
    /* 行内块是CSS3新增的概念，IE6，7，8 无法识别行内块 */
    /* 除非块元素里，有不需要换行的地方，才使用行内块 */
    display: block;
    width: 100%;
    height: 42px;
    color: #fff;
    font-size: 14px;
    /* text-indent 文本首行缩进 */
    text-indent: 30px;
    line-height: 42px;
    /* line-height等于文本容器的宽度  可以让文本 垂直方向上  居中 */
}

.show-wrap {
    position: absolute;
    left: 234px;
    top: 0;
    width: 500px;
    height: 460px;
    background: #fff;
    display: none;
    text-indent: 0px;
}

.shop-item {
    position: absolute;
    width: 208px;
    height: 41px;
    padding: 18px 20px;
}

.shop-item a {
    display: inline-block;
    width: 208px;
    height: 41px;
    font-family: "Microsoft YaHei";
    color: #333;
}



.shop-item img {
    display: inline-block;
    margin-right: 20px;
    width: 41px;
    height: 41px;
}

.shop-item a span {
    display: inline-block;
    width: 147px;
    line-height: 41px;
    font-size: 14px;
    color: rgb(51, 51, 51);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

/* 根据谷歌大数据 */
/* 最舒服的颜色是灰色 */
/* 最舒服的字体大小是12px 
    <!-- li{hello$}*18 -->  */


/* 
    弹性盒子模型>>用于移动端布局

    a链接避免跳转的方法
        href='javascript:;'
    
    哪些样式会继承： 
        所有的文本属性都会被继承 
    
      如何避免文本样式的继承污染
        跟文本有关的样式 ，全部写在文本所在的元素
        千万不要把文本写在结构标签中

    结构标签 文本标签
    通过什么东西区分标签 通过语义(h1,...h6,p,a,等文本标签）

    哪些情况会造成样式污染：
        命名不规范
        继承???
        优先级        
*/